<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">
<!-- 引入Js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<title>考勤记录查询</title>
</head>
<script type="text/javascript">
$(function(){
	//更改底部工具栏
	var pager = $('#kaoqinList').datagrid('getPager');	
	  pager.pagination({
		pageList: [10,20,30],
	});
});
//删除学生
function  delkaoqin() {
		//1 .获取被选中需要删除的数据
		var  data  =  $("#kaoqinList").datagrid('getSelections');
		if(data.length==0){
			$.messager.show({
				title:'警告',
				msg:'请选中需要删除的数据',
				timeout:1000,
				showType:'slide',
				style:{
					left:50,
					right:'',
					top:100
				}
			});
		}else{
			//声明一空的组数  装我选中的sid
			var kids = [];
			for (var i = 0; i < data.length; i++) {
				kids.push(data[i].kid);
			}
			$.messager.confirm('员工数据确认', '确认是否删除'+data.length+'条数据', function(r){
				if (r){
				    //通过ajax请求将对应数据发送到后台中
				    $.ajax({
				    	type:"post",
				    	url:'delkaoqin',
				    	data:{"kids":kids},
				    	dataType:"text",
				    	success:function(data){
				    		if(data=="1"){
				    			//提示删除成功
				    			$.messager.alert('提示','删除成功','info',function(){
				    				$("#kaoqinList").datagrid('reload');
				    			});   
				    			
				    		}else{
				    			//提示删除失败
				    			$.messager.alert('提示','删除失败'); 
				    		}
				    	}
				    });
				}else{
					$("#kaoqinList").datagrid('uncheckAll');
				}
			});
		}
}
//显示增加框
function showaddkaoqin(){
	$("#win").window("open");
};
//验证增加用户名是否存在
$(function(){
	//1.添加输入框光标事件
	$("#wname").blur(function(){
	//1.1获取该文本框的值
	var wname=$(this).val();
	if(wname==""){
		$.messager.alert('提示','请输入用户名','info',function(){
			$("#form").form('clear');
			$("#win").window("close");
			$("#kaoqinList").datagrid('reload');
		});
	}else{
		$.ajax({
			//选择提交方式
			type:"post",
			//发送的URL请求
			url:"addcheckkaoqin",
			//需要发送的数据
			data:{"wname":wname},
			//需要返回的数据类型:text(文本) json数据格式  xml数据格式
			dataType:"text",
			//代表当成功请求，有服务器反馈到success中
			success:function(data){
				if(data!="null"){
					$.messager.alert('提示','用户存在，请继续添加','info',function(){
						$("#wsex").val(data);
					});
					
				}else{	
					$.messager.alert('提示','用户不存在，请重新输入','info',function(){
						$("#form").form('clear');
					});
				}

			}
		});
	}
	});
	
});
//验证性别输入是否合乎规则
$(function(){
	$("#wsex").blur(function(){
		var sex=$("#wsex").val();
		if(sex=="男"||sex=="女"){
			//提示输入正确
			$.messager.alert('提示','输入正确'); 
		}else{
			$.messager.alert('提示','只能输入“男”或“女”','info',function(){
				$("#form").form('clear');
			});
		}
	});
}); 

//增加考勤记录
function addkaoqin(){	
	$("#form").form("submit",{	
	    onSubmit: function(){  
	    	//获取请假文本框的值
		var va=$("#vacate_day").val();
		var start_time=$("#start_time").datetimebox('getValue');
		var end_time=$("#end_time").datetimebox('getValue');
		
		//验证请假天数为0的情况
		if(va==0&&start_time==""){	
			$.messager.alert('提示','必填上班时间和下班时间','info',function(){
				$("#win").window("close");
				$("#kaoqinList").datagrid('reload');
			});
			return false;	
		}else if(va==0&&end_time==""){
			$.messager.alert('提示','必填上班时间和下班时间','info',function(){
				$("#win").window("close");
				$("#kaoqinList").datagrid('reload');
			});
			return false;
		}else if(va<0){//验证请假天数小于0的情况
			$.messager.alert('提示','请假天数不能小于0','info',function(){
				$("#win").window("close");
				$("#kaoqinList").datagrid('reload');
			});
			return false;
		}else{
			return true;
		}	
	    },
	    success:function(data){
	    	$("#win").window("close");
	    	if(data=="1"){
    			//提示添加成功
    			$.messager.alert('提示','添加成功','info',function(){
    				$("#kaoqinList").datagrid('reload');
    			});   
    			
    		}else{
    			//提示添加失败
    			$.messager.alert('提示','添加失败'); 
    		} 
	    }
	});	
};
	//通过员工姓名查询考勤信息
	function selectKaoQin() {
		//获取input中输入的值
		var wname = $("#checkwname").val();
		var datatime=$("#datatime").datebox('getValue');		
		if(wname!==""&&datatime==""){
			$('#finwin').window('open');
			//在新的窗口里面增加一个easyui中的数据表格
			$('#OneKaoQinList').datagrid({   
				url:"checknamekaoqin",
				queryParams: {
					wname:wname,
				},
			    columns:[[   
			        {field:'kid',title:'考勤信息ID',width:100},   
			        {field:'wname',title:'员工姓名',width:100},   
			        {field:'wsex',title:'员工性别',width:100},
			        {field:'vacate_day',title:'请假天数',width:100},
			        {field:'start_time',title:'上班时间',width:100},
			        {field:'end_time',title:'下班时间',width:100}
			    ]]   
			});  			
		}else if(wname==""&&datatime!==""){
			$('#finwin').window('open');
			//在新的窗口里面增加一个easyui中的数据表格
			$('#OneKaoQinList').datagrid({   
				url:"checktimekaoqin",
				queryParams: {
					datatime:datatime,
				},
			    columns:[[   
			        {field:'kid',title:'考勤信息ID',width:100},   
			        {field:'wname',title:'员工姓名',width:100},   
			        {field:'wsex',title:'员工性别',width:100},
			        {field:'vacate_day',title:'请假天数',width:100},
			        {field:'start_time',title:'上班时间',width:100},
			        {field:'end_time',title:'下班时间',width:100}
			    ]]   
			});  			
		}else if(wname!==""&&datatime!==""){
			$('#finwin').window('open');
			//在新的窗口里面增加一个easyui中的数据表格
			$('#OneKaoQinList').datagrid({   
				url:"checktimenamekaoqin",
				queryParams: {
					wname:wname,
					datatime:datatime,
				},
			    columns:[[   
			        {field:'kid',title:'考勤信息ID',width:100},   
			        {field:'wname',title:'员工姓名',width:100},   
			        {field:'wsex',title:'员工性别',width:100},
			        {field:'vacate_day',title:'请假天数',width:100},
			        {field:'start_time',title:'上班时间',width:100},
			        {field:'end_time',title:'下班时间',width:100}
			    ]]   
			});  
		}else{
			//提示查询失败
			$.messager.alert('提示','查询失败');
		}			
	};
	// 展示修改表单
	function showedituser(){
		var  data  =  $("#kaoqinList").datagrid('getSelections');
		 if(data.length!=1){
		    	$.messager.show({
		    		title:'警告',
		    		msg:'请选择你要修改的数据',
		    		timeout:1000,
		    		showType:'slide',
		    		style:{
		    			left:150,
		    			right:'',
		    			top:100
		    		}
		    	});
		   }else{
		      $("#checkwin").window("open");
				var kids = [];
				for (var i = 0; i < data.length; i++) {
					kids.push(data[i].kid);
				}
				$("#kid").attr("value",kids[0]);
		   }
	};
	//修改功能
	function updatekaoqin(){
		$("#updateform").form("submit",{
			//表单提交前内容判断
		    onSubmit: function(){    
		    	//获取3个input框值
			var va=$("#vacate_dayupdate").val();
			var start_time=$("#start_timeupdate").datetimebox('getValue');
			var end_time=$("#end_timeupdate").datetimebox('getValue');
			//判断请假天数为0的时候
			if(va==0&&start_time==""){	
				$.messager.alert('提示','必填上班时间和下班时间','info',function(){
					$("#checkwin").window("close");
					$("#kaoqinList").datagrid('reload');
				});
				return false;	
			}else if(va==0&&end_time==""){
				$.messager.alert('提示','必填上班时间和下班时间','info',function(){
					$("#checkwin").window("close");
					$("#kaoqinList").datagrid('reload');
				});
				return false;
			}else if(va<0){//验证请假天数小于0的情况
				$.messager.alert('提示','请假天数不能小于0','info',function(){
					$("#checkwin").window("close");
					$("#kaoqinList").datagrid('reload');
				});
				return false;
			}else{
				return true;
			}	
		    },
		    success:function(data){
		    	$("#checkwin").window("close");
		    	if(data=="1"){
	    			//提示修改成功
	    			$.messager.alert('提示','修改成功','info',function(){
	    				$("#kaoqinList").datagrid('reload');
	    			});   
	    			
	    		}else{
	    			//提示修改失败
	    			$.messager.alert('提示','修改失败'); 
	    		} 
		    }
		});	
	};
	//window窗口  取消按钮功能设置
	function closed(){
		//关闭修改输入窗口
		$('#checkwin').window('close');
		//关闭增加输入窗口
		$('#win').window('close');
	};
	
</script>
<body>
<!-- 考勤页面展示 -->
		<table id="kaoqinList" title="考勤信息查询" class="easyui-datagrid"
            toolbar="#toolbar" pagination="true" fit="true" 
            url="kaoqin" striped="true"
            rownumbers="true" fitColumns="true" border="false">
        <thead>
            <tr>
                <th field="ck" checkbox=true></th>
                <th field="kid"  hidden="true" >考勤信息ID</th>
                <th field="wname" width='50' resizable='false' >员工姓名</th>
                <th field="wsex" width='50' resizable='false'>员工性别</th>
                <th field="vacate_day" width='50' resizable='false'>请假天数</th>
                <th field="start_time" width='50'resizable='false'>上班时间</th>
                <th field="end_time" width='50' resizable='false'>下班时间</th>
            </tr>
        </thead>
    </table>
    <!-- 查询框 -->
    <div id="toolbar">
        <a id="add" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="showaddkaoqin()">增加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="showedituser()">修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delkaoqin()">删除</a>
       	输入时间:<input type="text" class="easyui-datebox" id="datatime" name="datatime"/>
                    输入员工姓名:<input type="text" id="checkwname" name="checkwname"/> 
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="selectKaoQin()">查询</a>       
    </div>
    <!-- 增加输入窗口 -->
    <div id="win" class="easyui-window" title="增加" style="width:300px;height:300px; " data-options="modal:true,closed:true" >
    	<form id="form" style="padding:10px 20px 10px 40px; " method="post" action="addkaoqin" onsubmit="return check()">
    		<p>员工姓名: <input id="wname" name="wname" class="easyui-validatebox" data-options="required:true,missingMessage:'请输入需要增加员工的姓名'"></p>
    		<p>员工性别: <input id="wsex" name="wsex" class="easyui-validatebox" > </p>
    		<p>请假天数: <input id="vacate_day"  name="vacate_day" class="easyui-validatebox"  ></p>
    		<p>上班时间: <input id="start_time" name="start_time" class="easyui-datetimebox" value="" style="width:200px" data-options="missingMessage:'没有请假必填'"></p>
    		<p>下班时间: <input id="end_time" name="end_time" class="easyui-datetimebox" value="" style="width:200px" data-options="missingMessage:'没有请假必填'"></p>
    		<div style="padding:5px;text-align:center;">
    			<a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="addkaoqin()">确认</a>
    			<a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="closed()">取消</a>
    		</div>
    	</form>
    </div>
    <!-- 查询展示窗口 -->
    <div class="easyui-window" closed="true" id="finwin" title="查询考勤信息"
		fit="true">
		<table id="OneKaoQinList" class="easyui-datagrid"  pagination="true" rownumbers="true" 
			fitColumns="true" border="false" striped="true" fit="true"
			data-options="method:'post'">
		</table>
	</div>
	<!-- 修改输入窗口 -->
	  <div id="checkwin" class="easyui-window" title="修改" style="width:300px;height:250px; " data-options="modal:true,closed:true" >
    	<form id="updateform" style="padding:10px 20px 10px 40px; " method="post" action="updatekaoqin" onsubmit="return check()">
    		<input id="kid"  name="kid" class="easyui-validatebox"  hidden="true">
    		<p>请假天数: <input id="vacate_dayupdate"  name="vacate_dayupdate" class="easyui-validatebox"  ></p>
    		<p>上班时间: <input id="start_timeupdate" name="start_timeupdate" class="easyui-datetimebox" value="" style="width:200px" data-options="missingMessage:'没有请假必填'"></p>
    		<p>下班时间: <input id="end_timeupdate" name="end_timeupdate" class="easyui-datetimebox" value="" style="width:200px" data-options="missingMessage:'没有请假必填'"></p>
    		<div style="padding:5px;text-align:center;">
    			<a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="updatekaoqin()">确认</a>
    			<a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="closed()">取消</a>
    		</div>
    	</form>
    </div>   
</body>
</html>